<template>
	<view>
		<uni-segmented-control :current="current" :values="bannerList" @clickItem="handleControl"
			styleType="text"></uni-segmented-control>
		<view class="current0" v-show="current == 0">
			<swiper class="swiper1" previous-margin="60rpx" next-margin="60rpx" :current="swiperCurrent" circular
				@change="handleMove">
				<swiper-item v-for="(item,index) in bannerData">
					<view class="swiper-item1" :class="[ swiperCurrent === index ? 'active1':'' ]">
						<image :src="item.imgUrl" mode=""></image>
						<view class="poem">
							<view>{{item.poemTitle}}</view>
							<view>{{item.poemAuthor}}</view>
							<view>{{item.poemText}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 诗人 -->
		<view class="current1" v-show="current == 1">
			<!-- 类别组件 -->
			<my-topSwipe :sortList="sortList"></my-topSwipe>
			<view class="poemsData" v-for="(item,index) in promsData" :key="index">
				<view class="poemHeadere">
					<image :src="item.poemsImg" mode=""></image>
					<view class="">
						{{item.poemsName}}
					</view>
				</view>
				<view class="poemsDetails">
					{{item.poemsDetails}}
				</view>
			</view>
		</view>
		<view class="" v-show="current == 2">
			<view class="presentBox" v-for="(item,index) in presentData" :key="index">
				<view class="userInfo">
					<image :src="item.userImg" mode=""></image>
					<view class="userName">
						<view>{{item.userName}}</view>
						<view>{{item.revivrTime}}</view>
					</view>
				</view>
				<view class="revive">
					<view>{{item.revive.title}}</view>
					<view>{{item.revive.content}}</view>
				</view>
				<view class="reviveIspoem">
					<view>{{item.poem.poemTitle}}</view>
					<view>{{item.poem.poemAuthor}}</view>
					<view>{{item.poem.poemText}}</view>
				</view>
				<view class="reviveFoot">
					<image @click="handleIsLove"
						:src="item.isLove? '../../static/loveActive.png' : '../../static/love.png'" mode=""></image>
					<image src="../../static/reviveImg.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
	<!-- 轮播图 -->
</template>
<script lang="ts">
	import { defineComponent, reactive, ref } from 'vue'
	import { getPoemsList, getpmSortList } from '../.././API/poemApi'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	export default defineComponent({
		setup() {

			const bannerList = ref(['一首', '飞花', '接古今'])
			const current = ref(0)
			// 推荐
			const bannerData = ref()
			const swiperCurrent = ref(1)
			// 接古今
			const presentData = ref()
			// 类别列表
			const sortList = ref()
			// 诗人列表
			const promsData = ref()
			bannerData.value = [
				{
					imgUrl: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.lUfvWg9abCN7cNsHsKDDDwHaMW?w=200&h=319&c=7&r=0&o=5&dpr=1.7&pid=1.7',
					poemTitle: '登鹳雀楼',
					poemAuthor: '唐·王之涣',
					poemText: '白日依山尽 黄河入海流 欲穷千里目 更上一层楼'
				},
				{
					imgUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.OuLPcQTE4NACmxhG-X9fhAHaQC?w=200&h=363&c=7&r=0&o=5&dpr=1.7&pid=1.7',
					poemTitle: '登鹳雀楼',
					poemAuthor: '唐·王之涣',
					poemText: '白日依山尽 黄河入海流 欲穷千里目 更上一层楼'
				},
				{
					imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.1g4L2McgZ4KEOq30zZezzwHaNK?w=187&h=333&c=7&r=0&o=5&dpr=1.7&pid=1.7',
					poemTitle: '登鹳雀楼',
					poemAuthor: '唐·王之涣',
					poemText: '白日依山尽 黄河入海流 欲穷千里目 更上一层楼'
				}
			]

			presentData.value = [
				{
					reviverId: '1231243242344352awsdsa',
					userImg: 'https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64',
					userName: '菠萝吹雪',
					revivrTime: '1分钟前',
					revive:
						{
							title: '------读鲁迅《骆驼祥子》',
							content: '骆驼祥子讲述了底层人民的生活，让我对生活有了新的看法，骆驼祥子讲述了底层人民的生活，让我对生活有了新的看法，骆驼祥子讲述了底层人民的生活，让我对生活有了新的看法。'
						}
					,
					poem: {
						poemTitle: '登鹳雀楼',
						poemAuthor: '唐·王之涣',
						poemText: '白日依山尽 黄河入海流 欲穷千里目 更上一层楼'
					},
					isLove: true

				},
				{
					userImg: 'https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64',
					userName: '菠萝吹雪',
					revivrTime: '1分钟前',
					revive:
						{
							title: '------读鲁迅《骆驼祥子》',
							content: '骆驼祥子讲述了底层人民的生活，让我对生活有了新的看法，骆驼祥子讲述了底层人民的生活，让我对生活有了新的看法，骆驼祥子讲述了底层人民的生活，让我对生活有了新的看法。'
						}
					,
					poem: {
						poemTitle: '登鹳雀楼',
						poemAuthor: '唐·王之涣',
						poemText: '白日依山尽 黄河入海流 欲穷千里目 更上一层楼'
					}

				},
				{
					userImg: 'https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64',
					userName: '菠萝吹雪',
					revivrTime: '1分钟前',
					revive:
						{
							title: '------读鲁迅《骆驼祥子》',
							content: '骆驼祥子讲述了底层人民的生活，让我对生活有了新的看法，骆驼祥子讲述了底层人民的生活，让我对生活有了新的看法，骆驼祥子讲述了底层人民的生活，让我对生活有了新的看法。'
						}
					,
					poem: {
						poemTitle: '登鹳雀楼',
						poemAuthor: '唐·王之涣',
						poemText: '白日依山尽 黄河入海流 欲穷千里目 更上一层楼'
					}

				}
			]
			const handleControl = ((e) => {
				console.log(e.currentIndex);
				if (current != e.currentIndex) {
					current.value = e.currentIndex
				}
				// 点击飞花
				if (e.currentIndex == 1) {
					// console.log("分类列表",sortList);
					getPoemsList().then((res : any) => {
						promsData.value = res.data.rows
					})

				}

			})
			const handleMove = ((e) => {
				console.log(e.detail.current);
				swiperCurrent.value = e.detail.current
				console.log(swiperCurrent);
			})

			// 评论点赞
			const handleIsLove = (() => {
				console.log('点赞了');
				console.log('取消赞了');
			})
			onLoad((options) => {
				getpmSortList().then((res1 : any) => {
					sortList.value = res1.data.data
				})
			})

			return {
				bannerList,
				promsData,
				current,
				sortList,
				bannerData,
				presentData,
				swiperCurrent,
				handleControl,
				handleMove,
				handleIsLove
			}
		}
	})
</script>
<style lang="less">
	page {
		background-color: #fbf6f8;
	}

	.swiper1 {
		// width: 100vh;
		// background-color: pink;
		height: 85vh;
		margin-top: 60rpx;

		swiper-item {
			display: flex;
			flex-direction: column;
			height: 100%;
			// justify-content: center;
			text-align: center;
			border-radius: 20px;

			image {
				height: 50vh;
				border-radius: 20px 20px 0 0;
			}

			.swiper-item1 {
				background-color: white;
				transform: scale(.9);
				border-radius: 20px;

			}

			.active1 {
				display: block;
				transform: scale(1);
				// z-index: 999;
				border-radius: 20px;
			}
		}
	}

	.poem {
		margin-top: 60rpx;
		width: 100%;
		height: 300rpx;
		font-family: '宋体';

		view {
			margin: 15px 0;
		}

		view:nth-child(2) {
			font-size: .6em;
			color: #fdb745;
		}

		view:nth-child(3) {
			margin: 15px auto;
			width: 55%;
		}
	}

	// 评论
	.presentBox {
		// background-color: #fdb745;
		border: 1px solid #cccc;
		display: flex;
		flex-direction: column;
		// height: 30vh;
		padding: 20rpx 40rpx;

		.userInfo {
			// height: 120rpx;
			display: flex;
			flex-direction: row;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 40rpx;
			}

			view {
				view:nth-child(1) {
					font-weight: 700;
				}

				view:nth-child(2) {
					font-weight: 200;
					font-size: .8em;
					margin-top: 10rpx;
				}
			}
		}

		.revive {
			font-family: '宋体';
			margin: 20rpx 0;

			view:nth-child(1) {
				margin-bottom: 30rpx;
			}

			view:nth-child(2) {
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.reviveIspoem {
			font-family: '宋体';
			border: 1px solid #cfaf57;
			box-shadow: -8rpx 0px 0 #cfaf57
				/* inset */
			;
			padding: 20rpx 20rpx;

			// text-align: left;
			view {
				margin-bottom: 10rpx;
			}

			view:nth-child(2) {
				color: #fdb745;
				font-size: .6em;
			}

			view:nth-child(3) {
				width: 55%;
				font-size: .6em;
			}

		}

		.reviveFoot {
			display: flex;

			image {
				width: 40rpx;
				height: 40rpx;
				margin: 20rpx 40rpx 0 0;
			}
		}
	}

	// 诗人列表
	.poemsData {
		margin: 20rpx 30rpx;
		font-family: '宋体';
		background-color: white;
		padding: 10rpx 20rpx;

		.poemHeadere {
			display: flex;
			align-items: center;

			// padding: 20rpx 20rpx;
			// flex-direction: column;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}

			view {
				font-size: 44rpx;
			}
		}

		.poemsDetails {
			line-height: 2em;
		}
	}
</style>